*{margin:0px;padding:0px}
body{font-family:arial}
#header
{
    height: 20%;
    background-color:#333;
    border-bottom:2px solid #333;
    overflow:auto;
    color:#fff;
}
#main
{
    padding:10px 10px 10px 10px;
}
#footer
{
    min-height:10px;
    background-color:#dedede;
    border-top:2px solid #333;
    padding:20px;
    clear:both
}
#article,#sidebar{background-color:#dedede; min-height:250px;margin-bottom:20px;overflow:auto}
.content{padding:20px}



@media only screen and (min-width: 480px)
{

    #header
    {   height: 20%;
        background-color:#333;
    }
    #main
    {
        padding:10px 20px 10px 20px;
    }

}

@media only screen and (min-width: 768px){
    #header
    {
        height: 20%;
        background-color:#333;	
    }
    #article
    {
        float:right;
        width:74%;
    }

    #sidebar
    {
        float:left;
        width:25%;
    }
    #logo
    {
        float:left;
        width:100%;
    }
    #nav
    {
        float:right;
        width:80%;
    }
    #main
    {
        padding:20px 30px 20px 30px;
    }

}

@media only screen and (min-width: 1140px) {

    #header
    {
        height: 150px;
        background-color:#333;	
    }
    
    #main
    {
        padding:10px 10px 10px 10px;
    }
    
    #footer
    {
        margin-top: 470px;
        min-height:10px;
        background-color:#dedede;
        border-top:2px solid #333;
        padding:20px;
        clear:both
    }

}